<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>打开新的网页</button>
  <button>替换新的网页</button>
  <button>网页重新加载</button>
  <script>
    // 1.完整的url
    console.log(location.href)
    // 2. 获取URL信息
    console.log(location.hostname) // 127.0.0.1
    console.log(location.host) // 127.0.0.1:5501
    console.log(location.protocol) // http:
    console.log(location.port) // 5501
    console.log(location.pathname) // /Learn_JavaScript_Basic/12_BOM%E7%9B%B8%E5%85%B3%E5%AF%B9%E8%B1%A1%E5%AD%A6%E4%B9%A0/02_BOM-location%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BD%BF%E7%94%A8.html
    console.log(location.search) // ?name=why

    // 3.location方法
    var btns = document.querySelectorAll("button")
    btns[0].onclick = () => {
      location.assign("http://www.baidu.com")
    }
    btns[1].onclick = () => {
      location.replace("http://www.baidu.com")
    }
    btns[2].onclick = () => {
      location.reload()
    }

    // 4.URLSearchParams
    var urlSearchString = "?name=why&age=18&height=1.88"
    console.log(urlSearchString.split("&"))
    var searchParams = new URLSearchParams(urlSearchString)
    console.log(searchParams)
    console.log(searchParams.get("name"))
    console.log(searchParams.get("age"))
    console.log(searchParams.get("height"))
    searchParams.set("address", "广州市")
    console.log(searchParams.get("address"))
    console.log(searchParams.toString())
    console.log(encodeURIComponent("广州市"))
    console.log(decodeURIComponent(searchParams.toString()))
 
  </script>
</body>

</html>